<template>
  <div>
    <mavon-editor ref="md" @imgAdd="$imgAdd" v-model="markdownContent" :toolbars="toolbars" :boxShadow="false"
                  :subfield="isEdit"
                  :defaultOpen="isEdit ? 'edit' :'preview'"
                  :editable="isEdit"
                  :toolbarsFlag="isEdit"></mavon-editor>
  </div>
</template>

<script>
import axios from 'axios';

let toolbars = {
  bold: true, // 粗体
  italic: true, // 斜体
  header: true, // 标题
  underline: true, // 下划线
  strikethrough: true, // 中划线
  mark: false, // 标记
  superscript: false, // 上角标
  subscript: false, // 下角标
  quote: true, // 引用
  ol: true, // 有序列表
  ul: true, // 无序列表
  link: true, // 链接
  imagelink: true, // 图片链接
  code: true, // code
  table: true, // 表格
  fullscreen: true, // 全屏编辑
  readmodel: false, // 沉浸式阅读
  htmlcode: true, // 展示html源码
  help: false, // 帮助
  /* 1.3.5 */
  undo: true, // 上一步
  redo: true, // 下一步
  trash: false, // 清空
  save: false, // 保存（触发events中的save事件）
  /* 1.4.2 */
  navigation: false, // 导航目录
  /* 2.1.8 */
  alignleft: true, // 左对齐
  aligncenter: true, // 居中
  alignright: true, // 右对齐
  /* 2.2.1 */
  subfield: true, // 单双栏模式
  preview: true, // 预览
  boxShadow: false
};

const baseUrl = process.env.VUE_APP_BASE_URL;
export default {
  props: {
    value: {
      type: String,
      default: ''
    },
    isEdit:{
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      markdownContent: this.value,
      fileList: [],
      headers: {
        'Content-Type': 'multipart/form-data'
      },
      toolbars
    };
  },
  watch: {
    value(newVal) {
      this.markdownContent = newVal;
    },
    markdownContent(newVal) {
      this.$emit('input', newVal);
    }
  },
  methods: {
    $imgAdd(pos, $file) {
      let formData = new FormData();
      formData.append('file', $file);
      axios({
        url: baseUrl +'/sysFile/upload',
        method: 'post',
        data: formData,
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(res => {
        this.$refs.md.$img2Url(pos, res.data);
      });
    },
  }
};
</script>

<style scoped>
/* 添加一些样式 */
</style>
